<template>
    <div>
        <router-view></router-view>
        <div class="nav">
            <div @click="$router.push('/house'),tabIndex=0" :class="{active:tabIndex==0}">
                <i class="iconfont icon-home"></i>
                <p>首页</p>
            </div>
            <div @click="$router.push('/course'),tabIndex=1" :class="{active:tabIndex==1}">
                <i class="iconfont icon-ziliaoku"></i>
                <p>课程</p>
            </div>
            <div @click="$router.push('/booking'),tabIndex=2" :class="{active:tabIndex==2}">
                <i class="iconfont icon-shouzhi"></i>
                <p>约课记录</p>
            </div>
            <div @click="$router.push('/practice'),tabIndex=3" :class="{active:tabIndex==3}">
                <i class="iconfont icon-kehuishouwu-feizhilei"></i>
                <p>练习</p>
            </div>
            <div @click="$router.push('/user'),tabIndex=4" :class="{active:tabIndex==4}">
                <i class="iconfont icon-wode"></i>
                <p>我的</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tabIndex:0,
        }
    },
};
</script>

<style lang="scss" scoped>
.nav{
  width: 100%;
  height: 100px;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  div{
    text-align: center;
    p{
        margin: 5px 0;
    }
  }
}
.active{
    color: orangered;
}
</style>
